import { useState } from "react";
import { Card, Button, notification } from "antd";
import axios from "@/api";
import useLoading from "@/hook/useLoading";
import styles from "./index.module.less";

export default function TimeLine() {
  const [loading, handLoading] = useLoading(false);
  const [timeloading, handTimeeLoading] = useLoading(false);
  const [dbloading, handDBLoading] = useLoading(false);
  const [timeData, handData] = useState([]);

  const handlerApi = () => {
    handLoading(true);
    axios
      .get("/testApi")
      .then((resp) => {
        console.log('testApi',resp);
        if (resp && resp.code == 1) {
          handData(resp.data);
          notification.info({
            message: resp.message,
          });
        }
        handLoading(false);
      })
      .catch((err) => {
        handLoading(false);
      });
  };

  const timelineApi = () => {
  
    handTimeeLoading(true);
    axios
      .get("/timeline")
      .then((resp) => {
        // console.log(resp);
        if (resp && resp.code == 1) {
          notification.info({
            message: resp.message,
            description: "接口: /timeline",
          });
        }
        handTimeeLoading(false);
      })
      .catch((err) => {
        handTimeeLoading(false);
      });
  };

  // 获取数据库数据
  const getTestdb = () => {
    handDBLoading(true);
    axios
      .get("/getDB")
      .then((resp) => {
        // console.log(resp);
        if (resp && resp.code == 1) {
          notification.info({
            message: resp.message,
            description: "接口: /getDB",
          });
          handData(resp.data);
        }
        handDBLoading(false);
      })
      .catch((err) => {
        handDBLoading(false);
      });
  };

  return (
    <div className={styles.timeline}>
      <h2>这里是timeline 测试接口</h2>
      <p>
        指向
        <a
          href="https://api.bilibili.com/pgc/web/timeline?types=1&before=6&after=6"
          target="_blank"
          rel="noopener noreferrer"
        >
          B站api地址
        </a>
      </p>
      <div className={styles.showView}>
        <Button loading={loading} onClick={handlerApi}>
          发起请求
        </Button>
        <Button
          style={{
            margin: "0 20px",
          }}
          loading={timeloading}
          onClick={timelineApi}
        >
          获取数据新
        </Button>
        <Button loading={dbloading} onClick={getTestdb}>
          获取数据库
        </Button>
        <Card hoverable>
          <pre>{JSON.stringify(timeData, null, 2)}</pre>
        </Card>
      </div>
    </div>
  );
}
